<template>
  <div class="login">
    <div class="form">
      <div class="form-group">
        <div class="form-inline">
          <label class="form-label">商户名称</label>
          <input type="text" class="form-control" placeholder="请输入商户名称" v-model="placename">
        </div>
      </div>
      <div class="form-group">
        <div class="form-inline">
          <label class="form-label">商户类别</label>
          <select type="text" class="form-control" v-model="placeType">
             <option value="0">请选择</option>
            <option :value="key" v-for="(item,key) in enumType" :key="key">{{item}}</option>
          </select>
        </div>
      </div>
      <div class="form-group">
        <div class="form-inline">
          <label class="form-label">联系人</label>
          <input type="text" class="form-control" placeholder="请输入联系人" v-model="contactName">
        </div>
      </div>
      <!-- <div class="form-group">
        <div class="form-inline">
          <label class="form-label">手机号</label>
          <input type="text" class="form-control" placeholder="请输入手机号" v-model="contactTel">
        </div>
      </div> -->
      <div class="form-group">
        <div class="form-inline">
          <label class="form-label">区域</label>
          <x-address class="form-control" value-text-align="left" :list="addressData" placeholder="省份-城市-区县" v-model="locationCodes"></x-address>
        </div>
      </div>
      <div class="form-group">
        <div class="form-inline">
          <label class="form-label">地址</label>
          <input type="text" class="form-control" placeholder="请输入地址" v-model="streetAddress">
        </div>
      </div>
      <div class="form-group">
        <div class="form-inline">
          <label class="form-label">订桌电话</label>
          <input type="text" class="form-control" placeholder="请输入订桌电话" v-model="contactTel">
        </div>
      </div>
      <div class="ctrl">
        <button class="back" @click="back">
          返 回
        </button>
        <button class="ctrl-login" @click="add">
          确 认
        </button>
      </div>
    </div>
  </div>
</template>
<script>
import { Indicator } from 'mint-ui';
import { Group,XAddress,ChinaAddressV4Data } from "vux";
export default {
  name: 'login',
  components:{Indicator,Group,XAddress},
  data () {
    return {
      placename:'',
      placeType:0,
      contactName:'',
      contactTel:'',
      locationCodes:[],
      streetAddress:'',
      phone:'',
      addressData:[],
      enumType:{
        1:'静吧',
        2:'动吧',
        3:'演艺吧',
        4:'量贩KTV',
        5:'KTV',
        6:'威士忌吧'
      }
    }
  },
  created(){

  },
  mounted() {
    function filterAddress (val) {
      let result=[]
      result=ChinaAddressV4Data.filter(function (item) {
        return item.value.split(0,2)[0]==val.split(0,2)[0];
      })
      return result;
    }
    // this.addressData=filterAddress('130000')
    // console.log(filterAddress('110000'))
  },
  methods:{
    add(){
      let self = this;
      if(!self.placename)
      return self.$toast("商户名称不可为空");
      if(!self.placeType)
      return self.$toast("请选择商户类别");
      if(!self.contactName)
      return self.$toast("联系人不可为空");
      if(!self.locationCodes.length)
      return self.$toast("请选择区域");
      let cityDisArr=document.getElementsByClassName("vux-popup-picker-value")[0].innerText.split(' ');
      if(!self.streetAddress){
        return self.$toast("地址不可为空");
      }
      var myReg = /^1[345678]\d{9}$/;
      if(!self.contactTel){
        self.$toast('订桌电话不可为空');
        return;
      }else if(!myReg.test(self.contactTel)){
        self.$toast('订桌电话有误');
        return;
      }
      self.yl.get({
        url:'/channel/channel_api/add_place.json',
        data:{
          provinceId:self.locationCodes[0],
          provinceName:cityDisArr[0],
          cityName:cityDisArr[1],
          cityId:self.locationCodes[1],
          districtId:self.locationCodes[2],
          districtName:cityDisArr[2],
          streetAddress:self.streetAddress,
          placeType:self.placeType,
          placename:self.placename,
          contactName:self.contactName,
          contactTel:self.contactTel,
        },
        success:function(res){
          if(res.result=='success'){
            console.log(res)
          }
        }

      })
    },
    back(){
      this.$router.push('/')
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.login{
  width: 100%;
  height: 100%;
  min-height: 8rem;
  background: #f0eff5;
  padding-top: .85rem;
  box-sizing: border-box;
  color: #fff;
  position: absolute;
  bottom: 0;
}
.form{
  width: 5.8rem;
  margin: auto;
}
.form .form-label{
  float: left;
  color: #333;
  font-size: .28rem;
  width: 4em;
  line-height: .74rem;
  margin-right: .1rem;
  text-align: right;
}
.form .form-group{
  margin-bottom: .4rem;
  height:.8rem ;
  overflow: hidden;
}
.form .form-inline{
  margin-bottom: .2rem;
  font-size: .3rem;
}

.form .form-group .code{
  float: right;
  min-width: 1.9rem;
  height: .93rem;
  /* border: 1px solid #fffcff; */
  border-radius: 5px;
  position: relative;
  top: 1px;
  color: #fffcff;
  /* left: .1rem; */
  float: right;
  padding: 0 .19rem;
  font-size: .28rem;
  background: #e57653;
}
.form .form-group .code[disabled]{
  background: #cecece;
  /* border: 1px solid #9a979a; */
}
.form .form-control{
  display: inline-block;
  overflow: hidden;
  width: 4.28rem;
  height: .74rem;
  padding-left: .2rem;
  border: 1px solid #d2d2d3;
  box-sizing: border-box;
  border-radius: 5px;
  background: #fff;
  color: #000;
  font-size: .28rem;
}
.form .form-control::-webkit-input-placeholder
{
  color:#777177;
}
.form .form-control:-moz-placeholder{
  color: #777177;
}
.form .weui-cell{
  padding: 0;
}
.ctrl{
  width: 100%;
  text-align: center;
  margin-top: 1rem;
}
.ctrl .back{
  width: 45%;
  height: .9rem;
  font-size: .45rem;
  color: #e57653;
  border-radius: .2rem;
  border: 1px solid #e57653;
  float: left;
}
.ctrl .ctrl-login{
  width: 45%;
  height: .9rem;
  font-size: .45rem;
  color: #fff;
  border-radius: .2rem;
  background: #e57653;
  float: right;
}
</style>
